const imgBox = document.querySelector('.imgbox')
// tempWrap()
async function tempWrap() {
     const res= await pAjax({
        url: 'https://www.lemall.com/api/indexBanner.html',
        dataType: 'json'
    })
        let str = ``;
        res.data.bannerList.forEach(item => {
            str += `
            <li>
            <img src="${ item.image}" alt="">
              </li>
            `

        })
        imgBox.innerHTML = str
    
}

const banner = document.querySelector('.banner')
const pointBox = document.querySelector('.pointbox')

const banner_width = banner.clientWidth
let timer = 0
let index = 1
let flag = true

copyEle()
function copyEle() {
  const first = imgBox.firstElementChild.cloneNode(true)
  const last = imgBox.lastElementChild.cloneNode(true)
  imgBox.appendChild(first)
  imgBox.insertBefore(last, imgBox.firstElementChild)
  imgBox.style.width = imgBox.children.length * 100 + '%'
  imgBox.style.left = -banner_width + 'px'
}

setPoint()
function setPoint() {
  const pointNum = imgBox.children.length - 2

  for (let i = 0; i < pointNum; i++) {
    const li = document.createElement('li')

    if (i === 0) li.classList.add('active')
    li.classList.add('item')
    li.dataset.point = i;
    li.innerText=i-0+1;
    pointBox.appendChild(li)
  }

  pointBox.style.width = pointNum * (20 + 10) +'px'
}

autoPlay()
function autoPlay() {
  timer = setInterval(() => {
    index++
    move(imgBox, { left: -index * banner_width }, moveEnd)
  }, 2000)
}

function moveEnd() {
  if (index === imgBox.children.length - 1) {
    index = 1
    imgBox.style.left = -index * banner_width + 'px'
  }

  if (index === 0) {
    index = imgBox.children.length - 2
    imgBox.style.left = -index * banner_width + 'px'
  }

  for (let i = 0; i < pointBox.children.length; i++) {
    pointBox.children[i].classList.remove('active')
  }
  pointBox.children[index - 1].classList.add('active')

  flag = true
}

overOut()
function overOut() {
  banner.addEventListener('mouseover', () => clearInterval(timer))
  banner.addEventListener('mouseout', () => autoPlay())
}

bindEvent()
function bindEvent() {
  banner.addEventListener('click', e => {

    if (e.target.className === 'left') {
      if (flag === false) return
      flag = false
      index--
      move(imgBox, { left: -index * banner_width }, moveEnd)
    }

    if (e.target.className === 'right') {
      if (flag === false) return
      flag = false
      index++
      move(imgBox, { left: -index * banner_width }, moveEnd)
    }

    if (e.target.className === 'item') {
      if (flag === false) return
      flag = false
      index = e.target.dataset.point - 0 + 1
      move(imgBox, { left: -index * banner_width }, moveEnd)
    }
  })
}

changeTab()
function changeTab() {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') clearInterval(timer)
    if (document.visibilityState === 'visible') autoPlay()
  })
}


function move(ele, options, fn = function () {}) {
    let count = 0
    for (let key in options) {
      count++
      if (key === 'opacity') options[key] *= 100
      const timer = setInterval(() => {
        let current
        if (key === 'opacity') {
          current = window.getComputedStyle(ele)[key] * 100
        } else {
          current = parseInt(window.getComputedStyle(ele)[key])
        }
        let distance = (options[key] - current) / 10
        distance = distance > 0 ? Math.ceil(distance) : Math.floor(distance)
        if (current === options[key]) {
          clearInterval(timer)
          count--
          if (count === 0) fn()
        } else {
          if (key === 'opacity') {
            ele.style[key] = (distance + current) / 100
          } else {
            ele.style[key] = distance + current + 'px'
          }
        }
      }, 10)
    }
  }